<template>
  <div class="article">
    <div class="top_big">
      <div
        class="top_img"
        :class="top_img_h"
        @mouseover="trFm(1)"
        @mouseout="trFm(0)"
        :style="`background-image:url('${artData.img?artData.img:'https://glack.net/img/blog/art_imgs/6.jpg'}')`"
      ></div>
    </div>
    <div class="title">{{artData.title}}</div>
    <img src="https://glack.net/img/blog/home.png" alt="首页" class="img_rig" @click="$router.push('/')">
    <!-- <img :src="home_img" alt="首页" class="img_rig" @click="$router.push('/')" @mouseover="imgChange(1)" @mouseout="imgChange(0)"> -->
    <img src="https://glack.net/img/blog/back.png" alt="返回" class="img_lef" @click="$router.back()" >
    <div class="content">
      <div class="con_t">{{artData.title}}
        <img src="https://glack.net/img/profile/1591367012039.png" class="edit_icon" @click="deleteItem" style="margin: 0 20px;" />
        <img src="https://glack.net/img/profile/1590300434107.png" v-if="$store.state.isLogin" class="edit_icon" @click="editPost"/>
      </div>
      <div class="update_time">最后更新时间: {{artData.last_modified_time | date-format}}</div>
      <mavonEditor :editable="false" :toolbarsFlag="false" :subfield="false" defaultOpen="preview" v-model="artData.articleDataForStr"/>
    </div>
  </div>
</template>

<script>
import {geArtById, deleteArticle} from '@/api/api'
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
  data() {
    return {
      top_img_h: "",
      artData: {
        last_modified_time: 'Tue Nov 12 2019 00:21:09 GMT+0800'
      },
      home_img: 'https://glack.net/img/blog/home.png',
      article_id: '',
      index: 0
    };
  },
  methods: {
    trFm(i) {
      if (i) {
        this.top_img_h = "top_img_h";
      } else {
        this.top_img_h = "top_img_o";
      }
    },
    async getDataContent(data){
      const res = await geArtById(data)
      if (res.data.code === 1) {
        this.artData = res.data.data
      }
    },
    editPost(){
      this.$router.push({path: "/postArticle", query: {id: this.article_id}})
    },
    deleteItem(){
      let id = this.article_id
      this.$confirm('确认要删除该文章吗？', '提示').then(async ()=>{
        const res = await deleteArticle({id, token: localStorage.getItem('token')})
        if(res.data.code === 1){
          this.$message.success('删除成功');
          this.$router.back()
        }else{
          this.$message.warning(res.data.msg);
        }
      }).catch(()=>{return})

    }
  },
  mounted() {
    this.article_id = this.$route.params.id
    this.getDataContent({id: this.article_id})
  },
  components: {
    mavonEditor,
  }
};
</script>

<style lang="scss" scoped>
.article{
  background-color: #fff;
}
.top_big {
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.top_img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.8;
  text-align: center;
}
.title {
  position: absolute;
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
}
.img_rig{
  position: absolute;
  right: 50px;
  top: 50px;
  cursor: pointer;
}
.img_rig:hover{
  opacity: 0.5;
}
.img_lef{
  position: absolute;
  left: 50px;
  top: 50px;
  cursor: pointer;
}
.img_lef:hover{
  opacity: 0.5;
}

.top_img_h {
  transform: scale(1.1);
  transition: transform 0.5s ease-in;
}
.top_img_o {
  transform: scale(1);
  transition: transform 0.5s ease-out;
}
.content {
  width: 80%;
  margin: 0 auto;
  padding: 60px 10px;
  font-size: 14px;
  .con_t{
    text-align: left;
    font-size: 20px;
    font-weight: 600;
    color: #737373;
    padding: 35px 0;
    border-bottom: 1px solid #e4e4e4;
  }
  .con_t::before{
    content: '# ';
    color: #ff6d6d; 
  }
  .update_time{
    font-size: 14px;
    color: #d2d2d2;
    margin: 20px 0;
  }
}
.edit_icon{
  float: right;
  width: 25px;
  height: 25px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .top_big{
    height: 250px !important;
  }
  .title{
    top: 19% !important;
  }
  .content{
    width: 100% !important;
    padding: 60px 0;
  }
  .con_t{
    padding: 30px 20px !important;
  }
  .update_time{
    padding-left: 20px;
  }
}
</style>
